<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>产品菜单2</title>
    <link th:href="@{login/css/bootstrap1.css}" rel="stylesheet"/>
    <link th:href="@{/login/css/productTab.css}" rel="stylesheet"/>
    <script th:src="@{login/js/bootstrap1.js}"></script>
    <script th:src="@{/login/js/jquery.js}"></script>
    <style>
        body {
            background-color: #f8f9fa;
            padding-top: 20px;
            padding-bottom: 40px;
        }

        .card {
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            border: none;
            margin-bottom: 20px;
        }

        .card-header {
            background-color: #4a6baf;
            color: white;
            font-weight: 600;
        }

        .form-label {
            font-weight: 500;
        }

        .preview-image img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }

        .btn-submit {
            background-color: #4a6baf;
            color: white;
            font-weight: 600;
            padding: 10px 20px;
        }

        .btn-submit:hover {
            background-color: #3a5a9f;
            color: white;
        }
        .page{
            position: absolute;
            right: 5%;
            margin-top: -3px;
        }
        a:link{
            color:white;
            font-size: 18px;
            font-weight: 500;
            text-decoration:none;
        }
        a:visited{
            color:white;
        }
        a:hover{
            color:orange;
        }
        a:active{
            color:white;
        }
    </style>
</head>
<body>
<!--修改新增页面-->
<div class="container">
    <div class="row">
        <!-- 商品信息表单 - 占8格 -->
        <div class="col-lg-8 col-md-12 mb-4">
            <div class="card">
                <div class="card-header">
                    <i class="fas fa-info-circle me-2"></i>商品信息
                    <a href="/productTable1" class="btn btn-sm page">返回上页</a>
                </div>
                <div class="card-body">
                    <form action="/postProductList1" method="post">
                        <div class="mb-4">
                            <h5 class="mb-3 border-bottom pb-2">基本信息</h5>
                            <input type="hidden" id="id" name="id" th:value="${product.id}">
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="name" class="form-label">商品名称</label>
                                    <input type="text" class="form-control" id="name" name="name"
                                           th:value="${product.name}" placeholder="输入商品名称" required>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="category" class="form-label">商品分类</label>
                                    <select class="form-select" id="category" name="category" required>
                                        <!--默认"请选择分类"，当后台没有给商品分类（null）或 分类是空字符串时，设为默认选项-->
                                        <option value="" th:selected="${product.category == null or product.category == ''}">请选择分类</option>
                                        <option value="电子产品" th:selected="${product.category=='电子产品'}">电子产品</option>
                                        <option value="电脑配件" th:selected="${product.category=='电脑配件'}">电脑配件</option>
                                        <option value="家居用品" th:selected="${product.category=='家居用品'}">家居用品</option>
                                        <option value="服装" th:selected="${product.category=='服装'}">服装</option>
                                        <option value="书籍" th:selected="${product.category=='书籍'}">书籍</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <!-- 价格与库存 -->
                        <div class="mb-4">
                            <h5 class="mb-3 border-bottom pb-2">价格与库存</h5>
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="price" class="form-label">商品价格</label>
                                    <div class="input-group">
                                        <span class="input-group-text">¥</span>
                                        <input type="number" class="form-control" id="price" name="price"
                                               th:value="${product.price}" placeholder="0.00" step="0.01" min="0" required>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="stock" class="form-label">库存数量</label>
                                    <input type="number" class="form-control" id="stock" name="stock"
                                           th:value="${product.stock}" placeholder="0" min="0" required>
                                </div>
                            </div>
                        </div>
                        <!-- 商品图片 -->
                        <div class="mb-4">
                            <h5 class="mb-3 border-bottom pb-2">商品图片</h5>
                            <div class="mb-3">
                                <label for="imageUrl" class="form-label">上传商品图片</label>
                                <input type="text" id="imageUrl" name="imageUrl" class="form-control"
                                       th:value="${product.imageUrl}" placeholder="可手动填写">
                            </div>
                        </div>
                        <!--商品描述，使用文本域，要用text替换内容，不用value-->
                        <div class="col-12">
                            <label for="description" class="form-label">商品描述</label>
                            <textarea id="description" name="description" class="form-control"
                                      th:text="${product.description}" rows="3"></textarea>
                        </div>
                        <!-- 商品状态 -->
                        <div class="mb-4">
                            <h5 class="mb-3 border-bottom pb-2">商品状态</h5>
                            <div class="mb-3">
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="status" id="status1" value="1"
                                           th:checked="${product.status==1}">
                                    <label class="form-check-label" for="status1">正常(上架)</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="status" id="status2" value="0"
                                           th:checked="${product.status==0}">
                                    <label class="form-check-label" for="status2">下架</label>
                                </div>
                            </div>
                        </div>
                        <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                            <button type="submit" class="btn btn-submit">保存商品信息</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!-- 商品预览 - 占4格 -->
        <div class="col-lg-4 col-md-12">
            <div class="card">
                <div class="card-header">
                    <i class="fas fa-eye me-2"></i>商品预览
                </div>
                <div class="card-body">
                    <div style="margin-bottom: 5px;height: 270px;background-color: #f5f5f5">
                        <img th:src="${product.imageUrl}"
                             class="card-img-top productImg" th:alt="${product.name}?: '暂无图片'"
                             style="width:380px;height: 270px;object-fit:cover;overflow: hidden">
                    </div>
                    <h4 class="mb-2" th:text="${product.name} ?: '商品名称'"></h4>
                    <div class="mb-3" style="color: red;font-size: 20px">
                        ¥<span th:text="${product.price} ?: '0.00'"></span>
                    </div>

                    <div class="mb-3" style="background-color: #e8f4fd;height: 55px;padding-top: 5px">
                        <div class="row text-center">
                            <div class="col-6">
                                <div class="fw-bold" th:text="${product.stock} ?: '0'"></div>
                                <small class="text-muted">库存</small>
                            </div>
                            <div class="col-6">
                                <div class="fw-bold" th:text="${product.category} ?: '-'"></div>
                                <small class="text-muted">分类</small>
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <span class="form-label">商品状态：</span>
                        <span class="badge"
                              th:classappend="${product.status == 1} ? 'bg-success' : 'bg-secondary'"
                              th:text="${product.status == 1} ? '上架' : '下架'">
<!--                        三元表达式，classappend是追加class选择器，状态为多少一个颜色，显示上下架-->
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>